<!--
 * @Date: 2023-02-21 17:21:21
 * @LastEditors: mengqingchen mengqc1995@163.com
 * @LastEditTime: 2023-02-28 10:53:48
 * @FilePath: \sososn-web-new\src\views\bulkIndustry\component\industrialAdvantages.vue
 * @des: 优势
-->
<template>
  <div class="group-1 flex-col items-center">
    <p class="group-title" data-aos="fade-up">产品优势</p>
    <ul class="group-cards flex-row" data-aos="fade-up" data-aos-delay="100">
      <li v-for="(item, index) in advantageList" :key="index">
        <el-image class="card-icon" :src="$getAssetsImages('card-icon.png')" />
        <p class="text-title">{{ item.title }}</p>
        <p class="text-content">{{ item.content }}</p>
        <el-image class="footer-icon" :src="$getAssetsImages('footer-icon.png')" />
      </li>
    </ul>
  </div>
</template>

<script setup>
const { industrialAdvantages } = inject('productData')
let advantageList = industrialAdvantages.advantageList
</script>
<style lang="scss" scoped>
/* @use ''; 引入css类 */
.group-1 {
  padding: 80px 0 90px;
  background: rgb(247 249 250 / 100%);

  .group-title {
    margin-bottom: 70px;
    font-family: PingFangSC-Medium, 'PingFang SC';
    font-size: 38px;
    font-weight: 500;
    line-height: 53px;
    color: #333;
  }

  .group-cards {
    flex-wrap: wrap;
    gap: 24px;
    width: 1440px;

    li {
      position: relative;
      width: 708px;
      height: 255px;
      padding: 40px;
      cursor: pointer;
      background: linear-gradient(180deg, rgb(245 246 249 / 80%) 0%, #fff 100%);
      border: 2px solid #fff;
      border-radius: 4px;
      box-shadow: 0 2px 12px 2px rgb(116 131 169 / 10%);

      &:hover {
        box-shadow: 7px 5px 30px 2px rgb(163 176 203 / 26%);

        .footer-icon {
          opacity: 1;
        }
      }

      .card-icon {
        position: absolute;
        top: 0;
        left: 150px;
        width: 160px;
        height: 160px;
      }

      .footer-icon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 354px;
        height: 164px;
        opacity: 0;
      }

      .text-title {
        position: relative;
        margin-bottom: 20px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-size: 24px;
        font-weight: 500;
        line-height: 33px;
        color: #333;
      }

      .text-content {
        position: relative;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
        color: #666;
      }
    }
  }
}
</style>
